<!DOCTYPE html>
<html>

<head>
    <title>千锋宿舍管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/stytem.css">
    <script src="../js/echarts.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/checklLogin.js"></script>
</head>
<style>
</style>

<body style="background-image: url(../img/dlem.jpg);">
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    </svg>
    <main>
        <div class="d-flex flex-column flex-shrink-0 p-3"
            style="width: 280px;background-color: #fff;margin:30px 0 0 30px;background-color:#28313c !important;">
            <div><span class="fs-4" style="font-weight: 700;color: #f7ffff;margin-left: 20px;">千锋宿舍管理系统</span></div>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
                <li class="nav-item">
                    <a href="./home.html" class="nav-link active" aria-current="page"
                        style="font-size:20px;font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#home" />
                        </svg>
                        情况总览
                    </a>
                </li>
                <li>
                    <a href="./dormitoryStaff.html" class="nav-link link-dark"
                        style="font-size: 20px; font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#speedometer2" />
                        </svg>
                        宿舍人员
                    </a>
                </li>
                <li>
                    <a href="./Absentstudent.html" class="nav-link link-dark" style="font-size: 20px;font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#table" />
                        </svg>
                        缺勤登记
                    </a>
                </li>
                <li>
                    <a href="./moveIn.html" class="nav-link link-dark"
                        style="font-size: 20px;font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#table" />
                        </svg>
                        入住申请
                    </a>
                </li>
                <li>
                    <a href="./manage.html" class="nav-link link-dark"
                        style="font-size: 20px; font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#grid" />
                        </svg>
                        管理人员
                    </a>
                </li>
                <li>
                    <a href="./updatepassword.html" class="nav-link link-dark"
                        style="font-size: 20px;font-weight: 700;color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#people-circle" />
                        </svg>
                        修改密码
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link link-dark" id="logout"
                        style="font-size: 20px;font-weight: 700; color: #f7ffff;">
                        <svg class="bi me-2" width="16" height="16">
                            <use xlink:href="#people-circle" />
                        </svg>
                        退出系统
                    </a>
                </li>
            </ul>
        </div>
        <div style="width:100%;height:100%;margin: 30px;">
            <div class="card p-3 mb-2 bg-white bg-gradient text-dark"
                style="width:100%;height: 70px; flex-direction: row; justify-content: space-between;padding: none;background-color: #28313c !important;">
                <h2 style="color: #f7ffff;">情况总览</h2>
                <span id="center" style="font-size: 26px;color: #f7ffff;"></span>
                <div>
                    <img src="../img/aaa.jpg" style="width: 50px;height: 45px;border-radius: 39%;" alt="">
                    <span id="manageName"
                        style="font-size: 25px;line-height: 35px;color: #f7ffff;">文渊</span>&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger btn-sm" style="margin-bottom: 5px;"
                        id="quit">退出</button>
                </div>
            </div>
            <div class="card p-3 mb-2 bg-white bg-gradient text-dark"
                style="width:100%;height: 100%;background-color: #fff;margin-top: 20px;">
                <div class="row  three_blocks">
                    <div class="col-xs-6 col-md-4" style="background-color: rgb(249, 249, 249);">
                        <img src="../img/管理人员 .png" alt="">管理人员
                    </div>
                    <div class="col-xs-6 col-md-4"style="background-color: rgb(249, 249, 249);" >
                        <img src="../img/人员.png" alt="">入住学生
                    </div>
                    <div class="col-xs-6 col-md-4" style="background-color: rgb(249, 249, 249);">
                        <img src="../img/申请.png" alt=""> 入住申请
                    </div>

                </div>

                <div class="row">
                    <div class="col-lg-6 "  >
                        <div id="main" class="icon_cbh" style="width: 560px;height:380px;"></div>
                    </div>
                    <div class="col-lg-6">
                        <div id="main1" class="icon_cbh" style="width: 560px;height:380px; " ></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="b-example-divider"></div> -->
    </main>
</body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));
        const myChart1 = echarts.init(document.getElementById('main1'));
        
        let datas = [
            {
                name: "一栋",
                value: 3,
            },
            {
                name: "二栋",
                value: 3,
            },
            {
                name: "三栋",
                value: 2,
            },
            {
                name: "四栋",
                value: 2,
            },
        ];

        var option = {
            color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],
            legend: {
                itemHeight: 14,
                itemWidth: 14,
                icon: "rect",
                orient: "vertical",
                top: "center",
                right: "3%",
                textStyle: {
                    align: "left",
                    color: "#",
                    verticalAlign: "middle",
                    rich: {
                        name: {
                            width: 60,
                            fontSize: 14,
                        },
                        value: {
                            width: 20,
                            align: "right",
                            fontFamily: "Medium",
                            fontSize: 16,
                        },
                        rate: {
                            width: 10,
                            align: "right",
                            fontSize: 16,
                        },
                    },
                },
                data: datas,
                formatter: (name) => {
                    if (datas.length) {
                        const item = datas.filter((item) => item.name === name)[0];
                        return `{name|${name}}{value| ${item.value}} {rate| 栋}`;
                    }
                },
            },
            tooltip: {
                trigger: "item",
                formatter: "{d}%",
            },
            series: [
                {
                    name: "",
                    type: "pie",
                    radius: ["30%", "65%"],
                    center: ["38%", "50%"],
                    roseType: "radius",
                    label: {
                        formatter: "{d}%",
                    },
                    labelLine: {
                        length: 1,
                        length2: 20,
                    },
                    data: datas,
                },
            ],
        };

        if (option) {
            myChart.setOption(option);
        }

        myChart.setOption(option);


        const option1 = {
            xAxis: {
                type: 'category',
                data: ['一栋', '二栋', '三栋', '四栋']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [90, 90, 60, 60],
                    type: 'bar'
                }
            ]
        };
        myChart1.setOption(option1);
    </script>
<script src="../js/systemTime.js"></script>

</html>